<script type="text/javascript" src="{$TPL}jquery.js"> </script> 
<script type="text/javascript" src="{$TPL}bxCarousel.js"> </script> 

{html}
<style>

html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}


.demo{
	width: 980px;height: 124px;margin: 0px auto;clear: both;position: relative;
	border:0px solid #d3d3d3
}
.bx_wrap {margin-left: 0px; margin-top:0px}


.bx_wrap ul img { border: 2px solid #000; }
.bx_wrap ul li{text-align:center}
.bx_wrap ul li a:hover{text-decoration:none; color:#f30}
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0;position:absolute; top:45px; left:-2px; text-indent:-999em; background: url(img/arr_left.gif) no-repeat;}
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:626px;position: absolute;top:45px; text-indent:-999em; background:url(img/arr_right.gif) no-repeat;}

</style>
<script type="text/javascript">
$(function(){
	$('#demo1').bxCarousel({
		display_num: 6, 
		move: 1, 
		auto: true, 
		controls: false,
		margin: 10,
		auto_hover: true
	});
});
</script>
{/html}

<div class="demo">
	<div style="text-align:left;font-size:20px;font-weight:bolder;padding:5px;border:0px solid red;">開発実績</div>

    <div class="bx_wrap">
        <div class="bx_container">
          <div class="bx_wrap"><div class="bx_container" style="position: relative; width: 980px; overflow: hidden; ">
		  
		  <ul id="demo1">	
		  
		  {**}
		  {foreach $product as $k => $v}
		   <li width=200  style="width:200px;"  ><a href='{_url m="view" id=$v.id}' target="_blank"><img     height=124 src="upload/{$v.pic}"></a><br>
				<span><a href="{_url m='view' id=$v.id}">{$v.title}</a></span></li> 
		   {/foreach}
		  
		  </ul></div>
        </div>
      </div>
    </div>